.taxo {
  margin: 2.5rem 0;
  z-index: z('taxo');

  &-root {
    position: -webkit-sticky;
    position: sticky;
    top: $grid_navbar_height;
    @include themify($themes) {
      background-color: themed('body-background-color');
    }    
  }

  &__title {
    font-weight: 700;
    font-family: $title-font;
    @include themify($themes) {
      color: themed('taxo-title-color');
      &:hover {
        color: themed('link-hover');
      }
    }
  }

  &__link {
    text-decoration: none !important;   

    &[data-dir="ltr"] {
      .taxo__text {
        border-top-left-radius: 0.175rem;
        border-bottom-left-radius: 0.175rem;
      }
      
      .taxo__num {
        padding: 0.125rem 0.25rem;
        border-top-right-radius: 0.175rem;
        border-bottom-right-radius: 0.175rem;    
      }
    }

    &[data-dir="rtl"] {
      .taxo__text {
        border-top-right-radius: 0.175rem;
        border-bottom-right-radius: 0.175rem;
      }
      
      .taxo__num {
        padding: 0.125rem 0.25rem;
        border-top-left-radius: 0.175rem;
        border-bottom-left-radius: 0.175rem;    
      }
    }
  }

  &__text {
    @include on-event {        
      text-decoration: underline !important;   
    }
    @include themify($themes) {
      color: inherit;
    }
  }

  &__num {
    @include themify($themes) {
      color: themed('taxo-num-color');
      background-color: themed('taxo-num-background-color');    
    }
  }

  .title {
    display: block;
    margin: 0rem;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .tag {
    margin: 0;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;        
    font-size: 0.8rem;    
    display: inline-block;

    @include themify($themes) {
      color: themed('taxo-title-color');
    }
  }

  .is-tags {
    border-radius: 0.175rem;
    
    @include themify($themes) {
      color: themed('taxo-tags-color');
      background-color: themed('taxo-tags-background-color');
    }

    &[data-dir="ltr"] {
      padding: 0.125rem 0 0.125rem 0.25rem;
    }

    &[data-dir="rtl"] {
      padding: 0.125rem 0.25rem 0.125rem 0;
    }
  }

  .is-categories {
    border-radius: 0.175rem;
    
    @include themify($themes) {
      color: themed('taxo-categories-color');
      background-color: themed('taxo-categories-background-color');
    }

    &[data-dir="ltr"] {
      padding: 0.125rem 0 0.125rem 0.25rem;
    }

    &[data-dir="rtl"] {
      padding: 0.125rem 0.25rem 0.125rem 0;
    }
  }

  .is-series {
    border-radius: 0.175rem;
    
    @include themify($themes) {
      color: themed('taxo-series-color');
      background-color: themed('taxo-series-background-color');
    }

    &[data-dir="ltr"] {
      padding: 0.125rem 0 0.125rem 0.25rem;
    }

    &[data-dir="rtl"] {
      padding: 0.125rem 0.25rem 0.125rem 0;
    }
  }
}
